<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DEMO 样例</title>
</head>

<body>
    <div id="result"></div>

    <!-- 不同的功能按钮 -->
    <label for="qrcode">扫码功能展示</label><br>
    <input type="button" name="qrcode" onclick="onQrCode()" value="扫码登录"><br>

    <label for="chooseDate">日期选择</label><br>
    <input type="button" name="chooseDate" onclick="onChooseDate()" value="日期选择"><br>

    <script src="dolh5.open.js"></script>
    <script src="dollogin.js"></script>
<!--    <script src="https://bling-openapi-dev.percent.cn/jsapi/1.0.0/dolh5.open.js"></script>-->
<!--    <script src="https://bling-openapi-dev.percent.cn/jsapi/1.0.0/dollogin.js"></script>-->

    <script>
        function onQrCode() {
            // 扫码
            dollogin.ready({
                id: "result", // 这里需要你在自己的页面定义一个HTML标签并设置id，例如: <div id="login_container"></div>或<span id="login_container"></span>
                goto: "https://bling-openapi.percent.com/oauth2/snsAuthorize?appId=app123&responseType=code&scope=snsapi_login&state=STATE&redirectUri=REDIRECT_URI", // 请参考注释里的方式
                style: "border:none;background-color:#FFFFFF;",
                width: "365",
                height: "400"
            });

            var handleMessage = function (event) {
                var origin = event.detail.origin;

                if (origin === "https://bling-openapi.percent.cn") { // 判断是否来自BLingLogin扫码事件
                    var loginTmpCode = event.detail.data;

                    // 获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
                    console.log("Get loginTmpCode: ", loginTmpCode);

                    const redirecUri = encodeURI("https://lowcode-dev.percent.cn/orgselect");
                    const appId = "20210519152249264891973603";
                    window.location.href = `https://bling-dev-openapi.percent.cn/api/open/oauth2/sns_authorize?appId=${appId}&redirectUri=${redirecUri}&response_type=code&tmpCode=` + loginTmpCode;
                }
            };

            if (typeof window.addEventListener != 'undefined') {
                window.addEventListener('message', handleMessage, false);
            } else if (typeof window.attachEvent != 'undefined') {
                window.attachEvent('onmessage', handleMessage);
            }
        }

        // 免登

        // 鉴权

        // 设备

        // 日期和日历
        function onChooseDate() {
            let div = document.getElementById("result");

            dolh5.date.datePicker({
                format: 'yyyy-MM-dd',
                defaultDate: '2015-04-17',
                onSuccess: function (data) {
                    console.log(data);
                    div.innerHTML = JSON.stringify(data);
                },
                onFail: function (err) {
                    console.log(err);
                    div.innerHTML = JSON.stringify(err);
                }
            });
        }

        // 通讯录选人

        // 导航栏

        // 媒体

        // 存储

    </script>

</body>

</html>